<div class="row clearfix">
        <div class="col-md-12 column">
                <Legend>Tracking Transaksi</legend>
                <?php //echo $this->today; ?>


    <div class="content-inner">
    <form name="frmSrch" id="frmSrch" method="POST">
    <table cellpadding="5px">     
                <tr>
                    <td>Jenis Transaksi</td>
                    <td>: <select name="transType" id="transType">
                           <option value=''>== Semua Transaksi ==</option>
                           <?php

                           foreach ($this->transTypeList as $oTransType) {                               
                                echo "<option value='".$oTransType['trans_type_id']."'>". $oTransType['trans_type_desc'] ."</option>";
                           }
                           ?>

                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Nomor Akun</td>
                    <td>: <input type="text" class="text" style="width:150px" name="nomor_akun" id="nomor_akun"></input>
                    
                    </td>
                </tr>
                <tr>
                    <td>Periode Transaksi</td>
                    <td>: <input type="text" class="easyui-text" style="width:150px" name="date1" id="date1" placeholder="Tanggal awal" value="<?php echo (isset($this->data['dateTmp1'])) ? $this->data['dateTmp1'] : ""; ?>"></input> s/d <input type="text" class="easyui-text" style="width:150px" name="date2" id="date2" placeholder="Tanggal akhir" value="<?php echo (isset($this->data['dateTmp2'])) ? $this->data['dateTmp2'] : ""; ?>"></input>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="getData()">Cari</a>

                    </td>
                </tr>

        </table>
    </form>
    <br>
    <table cellpadding="5px">

                
                <tr>
                    <td>Periode</td>
                    <td>: <span id="spPeriode"><?php echo $this->data['dateTmp1'];?> s/d <?php echo $this->data['dateTmp2'];?></span></td>
                </tr>
        </table>
    
    </div>
    <table id="vm" class="easyui-datagrid" title="Detail Transaksi" style="height:400px"
                data-options="
                        url: '<?php echo $this->baseUrl() ?>/jsondata/trackingadmin',
                        singleSelect: true,
                        rownumbers: true,
                        showFooter: true,
                        autoRowHeight:true,
                        autoRowWidth:true,
                        pagination:true,
                        pageSize:10
                ">
        <thead>
                <tr>
                        <th data-options="field:'trans_dtm',width:150">Tgl Transaksi</th>
                        <th data-options="field:'account_num',width:110">Nomor Akun</th>
                        <th data-options="field:'account_name',width:110">Nama Akun</th>
                        <th data-options="field:'descr',width:160">Jenis Transaksi</th>
                        <th data-options="field:'external_param',width:120">Telp/Seluler/PLN</th>
                        <th data-options="field:'external_resp',width:100">Status</th>
                        
                </tr>
        </thead>
    </table>
    <br>



                </div>
   </div>

<script>

    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

    var satrtDate = $('#date1').datepicker({
      format: 'yyyy-mm-dd'
    }).on('changeDate', function(ev) {
      //if (ev.date.valueOf() > endDate.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        endDate.setValue(newDate);
      //}
      satrtDate.hide();
      $('#date2')[0].focus();
    }).data('datepicker');

    var endDate = $('#date2').datepicker({
      onRender: function(date) {
        return date.valueOf() <= satrtDate.date.valueOf() ? 'disabled' : '';
      }, format: 'yyyy-mm-dd'
    }).on('changeDate', function(ev) {
      endDate.hide();
    }).data('datepicker');
    
    $(function(){
            var pager = $('#vm').datagrid('getPager');	// get the pager of datagrid
            pager.pagination({
                    buttons:[{
                            iconCls:'icon-pdf',
                            handler:function(){
                                    downloadPDF();
                            }
                    }]
            });
    })


    function downloadPDF(){

       var transType = $('#transType').val();
       var noAkun = $('#nomor_akun').val();
       var date1 = $('#date1').val();
       var date2 = $('#date2').val();

       $("#vm").datagrid("loading");

        $.ajax({
        type: 'GET',
        dataType: 'text',
        url: '<?php echo $this->baseUrl() ?>/pdf/trackingadmin',
        data: {transType: transType, date1: date1, date2: date2, noAkun: noAkun},
        success: function(result){
                    $("#vm").datagrid ("loaded");

                    if (result == "TIMEOUT"){
                        location.href = "<?php echo $this->baseUrl() ?>/index";
                    }else{
                        location.href = "<?php echo $this->baseUrl() ?>/pdf/"+result;
                    }
             }
        });

    }
    

    function submitForm(){
            //$('#frmAddMember').form('submit');
            $('#frmSrch').submit();
    }

    function getData(){

            var transType = $('#transType').val();
            var date1 = $('#date1').val();
            var date2 = $('#date2').val();
            var noAkun = $('#nomor_akun').val();

            document.getElementById("spPeriode").innerHTML = date1+" s/d "+date2;
            $('#vm').datagrid({
                queryParams: {
                page: 1,
                rows: 10,
                transType: transType,
                date1: date1,
                date2: date2,
                noAkun: noAkun
                }
                });

            var pager = $('#vm').datagrid('getPager');	// get the pager of datagrid
            pager.pagination({
                    buttons:[{
                            iconCls:'icon-pdf',
                            handler:function(){
                                    downloadPDF();
                            }
                    }]
            });
    }

    function pagerFilter(data){

            if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
                    data = {
                            total: data.length,
                            rows: data
                    }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                    onSelectPage:function(pageNum, pageSize){
                            opts.pageNumber = pageNum;
                            opts.pageSize = pageSize;
                            pager.pagination('refresh',{
                                    pageNumber:pageNum,
                                    pageSize:pageSize
                            });
                            dg.datagrid('loadData',data);
                    }
            });
            if (!data.originalRows){
                    data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
    }


    function loadGrid(frm){

            $('#vm').datagrid('loadData', getData());
    };


    function cek(){

        var msg = [];

        var date1 = $('#date1').val();
        var date2 = $('#date2').val();

        if (date1 == "") msg.push('<span>* Periode awal harus diisi</span>');
        if (date2 == "") msg.push('<span>* Periode akhir harus diisi</span>');

        if (msg.length == 0) return true;
        else{
            $.messager.alert('Info', msg.join('<br/>'));
            return false;
        }
    }


  
         
</script>

            
      

